<template>
	<view class="wrap">
    <u-notice-bar :text="notice" speed="40"></u-notice-bar>
    <view class="header">
      <u-scroll-list>
        <view class="help-scroll-list">
          <view	class="scroll-list__line"	v-for="(item, index) in menuArr"	:key="index">
            <view	class="scroll-list__line__item"	v-for="(item1, index1) in item" :key="index1"	:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
              <image	class="scroll-list__line__item__image"	:src="menuBaseUrl + item1.icon"></image>
              <text class="scroll-list__line__item__text">{{ item1.name }}</text>
            </view>
          </view>
        </view>
      </u-scroll-list>
    </view>
    <u-gap height="10"></u-gap>
    <view class="body-app">
			<u-grid class="grid" :col="3" :border="false">
        <u-grid-item  @click="navTo(item.url)"  v-for="(item, index) in appData" :key="index">
          <u-icon :label="item.name" labelPos="bottom" labelSize="14" :labelColor="style.$u_info"
           :name="item.icon" :color="style.$u_f_base_color" :size="35" :customStyle="{padding:20+'px'}" ></u-icon>
        </u-grid-item>
			</u-grid>
		</view>
    <u-gap height="20"></u-gap>
    <view class="body-zzss">
      <u-cell-group>
        <u-cell title="自助申诉" label="无法解决的问题，可以提交资料申诉处理" size="large" :border="false" isLink>
          <u-icon slot="icon" :color="style.$u_f_base_color" :size="35" name="file-text"></u-icon>
        </u-cell>
      </u-cell-group>
		</view>
    <u-gap height="20"></u-gap>
    <u--text prefixIcon="kefu-ermai" size="15" :iconStyle="style.iconStyle" :color="style.$u_f_base_color" text="联系客服" align="center" class="foot"></u--text>
	</view>
</template>
<script>
/**
 * Copyright (c) 2020-Now http://www.future.com All rights reserved.
 */
const ossBase = 'https://ff-cloud.oss-cn-beijing.aliyuncs.com'
const dataUrl = ossBase+'/app/json/workbench.index.json'
import { workbenchIndex } from '@/api/component'
export default {
	data() {
		return {
      notice: '智能帮助中心上线啦...',
      menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
		  menuArr: [
				[{
						name: '天猫新品',
						icon: '11.png'
					},
					{
						name: '今日爆款',
						icon: '9.png'
					}, {
						name: '天猫国际',
						icon: '17.png'
					}, {
						name: '饿了么',
						icon: '6.png'
					}, {
						name: '天猫超市',
						icon: '11.png'
					}, {
						name: '分类',
						icon: '2.png'
					}, {
						name: '天猫美食',
						icon: '3.png'
					}, {
						name: '阿里健康',
						icon: '12.png'
					}, {
						name: '口碑生活',
						icon: '7.png'
					}
				]
			],
      appData: [],
      style:{
        $u_f_base_color: '#73b7bb',
        $u_primary_disabled: '#9acafc',
        $u_info: '#909399',
        iconStyle: 'font-size: 19px;color:#73b7bb'
      }
		};
	},
  created(){
    workbenchIndex({params: {}, custom: { auth: false,toast: false }}).then(response => {
      this.workbenchData = response.data
      this.appData = workbenchData.allApp['1']
    })
  },
	methods: {
    navTo(url) { uni.navigateTo({url: url}); },
		search(value) {
			this.$u.toast('搜索内容为：' + value)
		}
	}
};
</script>
<style lang="scss">
  page {
    background-color:  $u-f-pg-bg-color;
  }
  .header{
    background-color: $u-f-base-color;
    .scroll-list {
    @include flex(column);
    &__line {
      @include flex;
      margin-top: 10px;
      &__item {
        margin-right: 15px;
        &__image {
          width: 61px;
          height: 48px;
        }
        &__text {
          margin-top: 5px;
          color: $u-content-color;
          font-size: 12px;
          text-align: center;
        }
        &--no-margin-right {
          margin-right: 0;
        }
      }
    }
    }
  }

  .body-app{
    background-color:  $u-f-main-color;
    padding-bottom: 20px;
  }

  .body-zzss{
    background-color:  $u-f-main-color;
    .u-cell{
      padding: 15px 0;
    }
  }

  .foot{
    position: fixed;
    bottom:20px;
    text-align: center;
    width: 100%;
  }

</style>
